<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue第一天</title>
    <link rel="stylesheet" href="../plugin/bootstrap/css/bootstrap.min.css">
    <script src="../vue.js"></script>
    <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
    <script src="../plugin/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <!--双向数据绑定-->
    <div class="app">
        <input type="text" v-model="message"/>
        <p>{{ message }}</p>
        <br>
        <ul>
            <!--循环-->
            <li v-for="(value,index) in arr">{{value}} ===>{{index}}</li>
        </ul>
        <br>
        <ul>
            <li v-for="(item,index,key) in json">{{item}}==> {{index}}==>{{key}}</li>
        </ul>
    </div>

    <!--基础事件-->
    <div id="box">
        <input type="button" value="按钮" v-on:dblclick="add()">
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>

        <!--点击按钮div消失-->
        <input type="button" v-on:click="a=false" value="点击">
        <div style="width: 100px;height: 100px;background-color: red;" v-show="a"></div>
    </div>
    <script>
        window.onload = function(){
           /* new Vue({
                el:".app",
                data:{
                    message:"welcome vue",
                    arr:['apple','banana','orange','pear'],
                    json:{a:'apple',b:'banana',c:'orange'}
                }
            })*/

           new Vue({
               el:'#box',
               data:{
                   message:"welcome vue",
                   arr:['apple','banana','orange','pear'],
                   json:{a:'apple',b:'banana',c:'orange'},
                   a:true
               },
               methods:{
                   add:function () {
                       this.arr.push('tomato');
                   }
               }
           })
        }
    </script>
</body>
</html>